<template>
    <div>
        <div class='new_home-index'>

        </div>
        <div class="home-index">
            <div class="home-index-user">
                <van-image class="home-index-user-image" :src="userInfo?.avatar" round fit="cover" />
                <div class="home-index-user-info">
                    <div class="home-index-user-info-name">{{ userInfo?.nickName }}</div>
                    <!-- <div class="home-index-user-info-dandp">
						{{ userInfo.dept?.deptName }} | {{ positionName(userPost) }}
					</div> -->
                    <div class="home-index-user-info-dandp flex-row">
                        <div class="topbumen_l ellipsis flex-center">
                            {{ userInfo.dept?.deptName }}
                        </div>
                        <div class="topbumen_r ellipsis flex-center">
                            {{ positionName(userPost) }}
                        </div>
                    </div>
                </div>
                <van-badge :dot="newsQuantity !== 0" class="menu_news">
                    <van-image :src="icon_xiaoxi" @click="icon_xiaoxiClick" />
                </van-badge>
                <!-- <van-image class="menu_cion" :src="menuIcon" @click="showRight = true" /> -->
            </div>
            <!-- <div class="home-index-notice">
				<van-image class="notice_icon" :src="gonggao" />
				<van-notice-bar class="font" scrollable :text="versionNotice" />
			</div> -->
            <SystemSettings v-model="showRight"></SystemSettings>
            <div class="home-index-data">
                <div class="home-index-data-bg"></div>
                <div class="home-index-data-mainbox">
                    <div class="home-index-data-title">
                        <div class="home-index-data-title-title">
                            <van-image class="home-index-todo-title-image" :src="sjjbImage" />
                            <!-- <div class="home-index-data-title-title-text">数据简报</div> -->
                            <div class="home-index-data-title-title-textimg"></div>
                        </div>
                        <!-- <div class="home-index-data-date">
							<div class="home-index-data-date-first">
								<div class="home-index-data-date-first-date" @click="showPicker = true">
									{{ currentDateFormat }}
								</div>
								<van-image width="10" height="6" :src="lsxsjImage" />
							</div>
							<van-popup v-model:show="showPicker" position="bottom">
								<van-date-picker @confirm="onConfirm" @cancel="showPicker = false" v-model="currentDate"
									:max-date="maxDate" />
							</van-popup>
							<div class="home-index-data-date-middle">至</div>
							<div class="home-index-data-date-second">
								<div class="home-index-data-date-second-date" @click="showPickerBottom = true">
									{{ currentDateFormatInterval }}
								</div>
								<van-image width="10" height="6" :src="lsxsjImage" />
							</div>
							<van-popup v-model:show="showPickerBottom" position="bottom">
								<van-date-picker @confirm="onConfirmBottom" @cancel="showPickerBottom = false"
									v-model="currentDateBottom" :min-date="minDate" />
							</van-popup>
						</div> -->
                        <div class="home-dates-box flex-align-center b-box" @click="showCalendar = true">
                            <div class="flex-align-center">
                                <div class="home-index-data-date-first">
                                    <!-- <div class="home-index-data-date-first-date" @click="showPicker = true"> -->
                                    <div class="home-index-data-date-first-date">
                                        {{ currentDateFormat }}
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="home-index-data-date-second">
                                    <!-- <div class="home-index-data-date-second-date" @click="showPickerBottom = true"> -->
                                    <div class="home-index-data-date-second-date">
                                        {{ currentDateFormatInterval }}
                                    </div>
                                </div>
                            </div>

                            <div class="r_img"></div>
                        </div>
                        <van-calendar v-model:show="showCalendar" switch-mode="year-month" allow-same-day type="range"
                            @confirm="onConfirmCalendar" />
                    </div>
                    <div class="home-index-data-card">
                        <div class="home-index-data-card-first ">
                            <div class="home-index-data-card-first-first home-index-data-card-position"
                                @click="briefingProducts('招商入库')">
                                <van-image class="home-index-data-card-first-first-image" :src="xzspImage" />
                                <div class="home-index-data-card-first-first-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ addProductNums }}</div>
                                    <div class="home-index-data-card-first-first-text home-index-data-card-position-text-size"
                                        style="right: 6px;">
                                        招商入库
                                    </div>
                                </div>
                            </div>
                            <div class="home-index-data-card-first-second home-index-data-card-position"
                                @click="briefingProducts('供应商入库')">
                                <van-image class="home-index-data-card-first-first-image t_r_10" :src="sjspImage" />
                                <div class="home-index-data-card-first-second-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ listingNums }}</div>
                                    <div
                                        class="home-index-data-card-first-first-text1 home-index-data-card-position-text-size">
                                        供应商入库
                                    </div>
                                </div>
                            </div>
                            <div class="home-index-data-card-first-third home-index-data-card-position"
                                @click="briefingProducts('还品入库')">
                                <van-image class="home-index-data-card-first-first-image" :src="jlspImage" />
                                <div class="home-index-data-card-first-third-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ jianlianNums }}</div>
                                    <div class="home-index-data-card-first-first-text2 home-index-data-card-position-text-size"
                                        style="right: 6px;">
                                        还品入库
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="home-index-data-card-second">
                            <div class="home-index-data-card-second-first home-index-data-card-position"
                                @click="briefingProducts('退货出库')">
                                <van-image class="home-index-data-card-first-first-image" :src="zbxpImage" />
                                <div class="home-index-data-card-second-first-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ launchNums }}</div>
                                    <div class="home-index-data-card-first-first-text3 home-index-data-card-position-text-size"
                                        style="right: 6px;">
                                        退货出库
                                    </div>
                                </div>
                            </div>
                            <div class="home-index-data-card-second-second home-index-data-card-position"
                                @click="briefingProducts('选品出库')">
                                <van-image class="home-index-data-card-first-first-image" :src="rkspImage" />
                                <div class="home-index-data-card-second-second-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ warehousingNums }}</div>
                                    <div class="home-index-data-card-first-first-text4 home-index-data-card-position-text-size"
                                        style="right: 6px;">
                                        选品出库
                                    </div>
                                </div>
                            </div>
                            <div class="home-index-data-card-second-third home-index-data-card-position"
                                @click="briefingProducts('货架使用率')">
                                <van-image class="home-index-data-card-first-first-image t_r_10" :src="qshtImage" />
                                <div class="home-index-data-card-second-third-text home-index-data-card-position-text">
                                    <div style="margin-right: 6px;">{{ signNums }}</div>
                                    <div
                                        class="home-index-data-card-first-first-text5 home-index-data-card-position-text-size">
                                        货架使用率
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- <div class="home-index-todo">
				<div class="home-index-todo-title">
					<van-image class="home-index-todo-title-image" :src="dbgzImage" />
					<div>待办工作</div>
				</div>
				<div class="home-index-todo-list">
					<div class="home-index-todo-list-first" v-for="(item, index) in centerList" :key="index"
						@click="toProductList(item.id)">
						<van-image class="home-index-todo-list-first-image" :src="item.img" />
						<div>{{ item.name }}</div>
						<div class="home-index-todo-list-first-badge" v-show="item.nums !== 0">
							<div>{{ item.nums }}</div>
						</div>
					</div>
				</div>
			</div> -->
            <div class="home-index-todo">
                <div class="home-index-todo-title">
                    <div class="home-index-todo-title-imgtext"></div>
                </div>
                <div class="todo_guajian"></div>
                <div class="home-index-todo-list">
                    <div class="home-index-todo-list-first" v-for="(item, index) in centerList" :key="index"
                        @click="toProductList(item.id)">
                        <van-image class="home-index-todo-list-first-image" :src="item.img" />
                        <div>{{ item.name }}</div>
                        <div class="home-index-todo-list-first-badge" style="left: auto;right: 6px;"
                            v-show="item.nums !== 0">
                            <div>{{ item.nums }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class='new_kjrk'>
                <div class="home-index-shortcuts">
                    <div class="home-index-shortcuts-title b-box">
                        <van-image class="home-index-todo-title-image" :src="kjrkImage" />
                        <van-image class="home-index-todo-title-textimage" :src="kjrkTextImage" />
                    </div>
                    <div class="home-index-shortcuts-card b-box">
                        <div class="home-index-shortcuts-card-right" style="margin-left: 0;">
                            <div class="home-index-shortcuts-card-right-top"
                                style="background: linear-gradient( 180deg, #E1FEE6 0%, #FFFFFF 100%);"
                                @click.prevent="addProduct('扫码上架')">
                                <van-image :src="tjspImage2" class="home-index-shortcuts-card-right-top-image" />
                                <div class="home-index-shortcuts-card-right-top-text">
                                    扫码上架
                                </div>
                                <div class="home-index-shortcuts-card-right-top-tips">
                                    扫描商品码和货架码上架
                                </div>
                            </div>
                            <div class="home-index-shortcuts-card-right-bottom"
                                style="background: linear-gradient( 180deg, #E1EEFF 0%, #FFFFFF 100%);"
                                @click.prevent="addProduct('盘点调拨')">
                                <van-image :src="tjspImage3" class="home-index-shortcuts-card-right-bottom-image" />
                                <div class="home-index-shortcuts-card-right-bottom-text">
                                    盘点调拨
                                </div>
                                <div class="home-index-shortcuts-card-right-bottom-tips">
                                    扫码进行切
                                </div>
                                <div
                                    class="home-index-shortcuts-card-right-bottom-tips home-index-shortcuts-card-right-bottom-tips2">
                                    换货架
                                </div>
                            </div>
                        </div>
                        <div class="home-index-shortcuts-card-right">
                            <div class="home-index-shortcuts-card-right-top" @click.prevent="addProduct('发起入库')">
                                <van-image :src="tjgysImage" class="home-index-shortcuts-card-right-top-image" />
                                <div class="home-index-shortcuts-card-right-top-text">
                                    发起入库
                                </div>
                                <div class="home-index-shortcuts-card-right-top-tips">
                                    操作商品入库
                                </div>
                            </div>
                            <div class="home-index-shortcuts-card-right-bottom" @click.prevent="addProduct('发起出库')">
                                <van-image :src="tjspImage1" class="home-index-shortcuts-card-right-bottom-image" />
                                <div class="home-index-shortcuts-card-right-bottom-text">
                                    发起出库
                                </div>
                                <div class="home-index-shortcuts-card-right-bottom-tips">
                                    操作商品出库
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import SystemSettings from '@/components/SystemSettings/index.vue'
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";
import { showFailToast } from "vant";
import { getSupplierAddProductsById } from "@/api/productList/index";
import { isPositiveInteger } from '@/utils/validate'
import { listNotice } from '@/api/loginApi'
import { stripTags } from '@/utils/index'
import { timeTotal, getTotal } from '@/api/productHome/index'
import { queryDeptCount } from '@/api/operation/index'

const route = useRoute();

// const menuIcon = new URL(
//     "@/assets/newui/home/icon_caidan@2x.png",
//     import.meta.url
// ).href;
// const sanmashangjia = new URL(
//     "@/assets/productHome/icon_saomashangjia.png",
//     import.meta.url
// ).href;
// const pandiandiaobo = new URL(
//     "@/assets/productHome/icon_pandiandiaobo.png",
//     import.meta.url
// ).href;
const tjgysImage = new URL(
    "@/assets/newui/home/icon_tianjiagongyingshang@2x.png",
    import.meta.url
).href;

// const tjspImage = new URL(
//     "@/assets/newui/home/icon_tianjiashangpin@2x.png",
//     import.meta.url
// ).href;
const tjspImage1 = new URL(
    "@/assets/newui/home/icon_yaoyueyangpin@2x.png",
    import.meta.url
).href;
const tjspImage2 = new URL(
    "@/assets/newui/home/icon_saomashangjia@2x.png",
    import.meta.url
).href;
const tjspImage3 = new URL(
    "@/assets/newui/home/icon_pandiandiaobo@2x.png",
    import.meta.url
).href;
const sjjbImage = new URL(
    "@/assets/newui/home/icon_shujujianbaotu@2x.png",
    import.meta.url
).href;

const kjrkImage = new URL(
    "@/assets/newui/home/icon_kuaijierukoutu@2x.png",
    import.meta.url
).href;
const kjrkTextImage = new URL(
    "@/assets/newui/home/icon_kuaijierukou@2x.png",
    import.meta.url
).href;
// const lsxsjImage = new URL(
//     "@/assets/home/icon_lansexiasanjiao.png",
//     import.meta.url
// ).href;

const xzspImage = new URL(
    "@/assets/productHome/icon_zhaoshangruku.png",
    import.meta.url
).href;

const sjspImage = new URL(
    "@/assets/productHome/icon_gongyingshangruku.png",
    import.meta.url
).href;

const jlspImage = new URL(
    "@/assets/productHome/icon_huanpinruku.png",
    import.meta.url
).href;

const zbxpImage = new URL(
    "@/assets/productHome/icon_tuihuochuku.png",
    import.meta.url
).href;

const rkspImage = new URL(
    "@/assets/productHome/icon_xuanpinchuku.png",
    import.meta.url
).href;

const qshtImage = new URL(
    "@/assets/productHome/icon_huojiashiyonglv.png",
    import.meta.url
).href;

// const dbgzImage = new URL(
//     "@/assets/home/icon_daibangongzuo@2x.png",
//     import.meta.url
// ).href;

// const gonggao = new URL(
//     "@/assets/home/icon_gonggao.png",
//     import.meta.url
// ).href;


const icon_xiaoxi = new URL(
    "@/assets/newui/home/icon_xiaoxitongzhi@2x.png",
    import.meta.url
).href;
const router = useRouter();
const userInfo = ref<any>({});
const userPost = ref<any>([])
const roles = ref<any>({});
// const showPicker = ref(false);
// const showPickerBottom = ref(false)
const addProductNums = ref(0);
const listingNums = ref(0);
const jianlianNums = ref(0);
const launchNums = ref(0);
const warehousingNums = ref(0);
const signNums = ref(0);
const showRight = ref(false);
const versionNotice = ref()
const newsQuantity = ref(0)

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const currentDate = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);
const currentDateBottom = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);

/** 回显周期筛选字段 */
const startTime = computed(() => {
    return route.query.startTime;
});
/** 回显周期筛选字段 */
const endTime = computed(() => {
    return route.query.endTime;
});
const currentDateFormat = ref<any>(currentDate.value.join("-"))
const currentDateFormatInterval = ref<any>(currentDateBottom.value.join("-"))
onMounted(() => {
    startTime.value && (currentDateFormat.value = (startTime.value as any).split(' ')[0])
    endTime.value && (currentDateFormatInterval.value = (endTime.value as any).split(' ')[0])
    const datas = currentDateFormat.value.split('-')
    const dataSecond = datas[2].split(' ')[0]
    const datasBottom = currentDateFormatInterval.value.split('-')
    const dataBottomSecond = datasBottom[2].split(' ')[0]
    currentDate.value = [
        datas[0],
        datas[1],
        dataSecond
    ]
    currentDateBottom.value = [
        datasBottom[0],
        datasBottom[1],
        dataBottomSecond
    ]
    gettotalByUserIdAndTime()
})

// // 限制最大可选时间
// const maxDate = computed(() => {
//     return new Date(currentDateBottom.value.join('/'))
// })

// // 限制最小可选时间
// const minDate = computed(() => {
//     return new Date(currentDate.value.join('/'))
// })

/** 数据简报跳转 */
const briefingProducts = (type: string) => {
    if (['招商入库', '供应商入库', '还品入库', '选品出库'].includes(type)) {
        router.push({
            path: '/inventoryList',
            query: {
                type: type,
                startTime: currentDateFormat.value,
                endTime: currentDateFormatInterval.value
            }
        })
    } else {
    }
}

// /** 日期选择 */
// const onConfirm = () => {
//     showPicker.value = false;
//     currentDateFormat.value = currentDate.value.join("-")
//     gettotalByUserIdAndTime();
// };
// /** 日期选择 */
// const onConfirmBottom = () => {
//     showPickerBottom.value = false
//     currentDateFormatInterval.value = currentDateBottom.value.join("-")
//     gettotalByUserIdAndTime();
// }
/** 获取首页数据简报 */
const gettotalByUserIdAndTime = async () => {
    const res = await timeTotal({
        startTime: currentDateFormat.value,
        endTime: currentDateFormatInterval.value
    })
    res.data.forEach(item => {
        if (item.auditStatus == '招商入库') {
            addProductNums.value = item.total
        } else if (item.auditStatus == '供应商入库') {
            listingNums.value = item.total
        } else if (item.auditStatus == '还品入库') {
            jianlianNums.value = item.total
        } else if (item.auditStatus == '选品出库') {
            warehousingNums.value = item.total
        }
    })
}

const centerList = ref([
    {
        name: "待入库",
        nums: 0,
        id: "2",
        img: new URL("@/assets/productHome/icon_dairuku@2x.png", import.meta.url).href,
    },
    {
        name: "待上架",
        nums: 0,
        id: "1",
        img: new URL("@/assets/productHome/icon_daishangjia@2x.png", import.meta.url).href,
    },
    {
        name: "待收样",
        nums: 0,
        id: "5",
        img: new URL("@/assets/productHome/icon_daishouyang@2x.png", import.meta.url).href,
    },
    {
        name: "待下架 ",
        nums: 0,
        id: "4",
        img: new URL("@/assets/productHome/icon_daixiajia@2x.png", import.meta.url).href,
    },
    {
        name: "已超期",
        nums: 0,
        id: "3",
        img: new URL("@/assets/productHome/icon_yichaoqi@2x.png", import.meta.url).href,
    },
]);

/** 首页快捷入口 */
const addProduct = (name: string) => {
    if (name == "扫码上架") {
        (window as any).uni.webView.postMessage({
            data: {
                type: "scanCode",
                name: "grounding"
            },
        });

        // 模拟商品
        // router.push({
        //     path: '/grounding',
        //     query:{
        //         id: '1821405188040761346'
        //     }
        // })
    } else if (name == "发起入库") {
        router.push({
            path: '/storageType',
        })
    } else if (name == "盘点调拨") {
        router.push('/inventoryAllocation')
    } else if (name == '发起出库') {
        router.push({
            path: '/outboundType',
        })
    }
};

/** uniapp端回传扫码数据 */
(window as any).msgFromUniapp = async function (arg) {
    // 上架
    if (arg.name == 'grounding') {
        if (isPositiveInteger(arg.productId)) {
            await getSupplierAddProductsById({ productId: arg.productId })
            router.push({
                path: '/grounding',
                query: {
                    id: arg.productId,
                    from: 'home'
                }
            })
        } else {
            showFailToast({ message: '该商品不存在' });
        }
        // 商品详情
    } else if (arg.name == 'productDetail') {
        if (isPositiveInteger(arg.productId)) {
            await getSupplierAddProductsById({ productId: arg.productId })
            router.push({
                path: `/productHomeDetail/${arg.productId}`
            });
        } else {
            showFailToast({ message: '该商品不存在' });
        }
    }
}

const getList = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
    userPost.value = res.data.posts || [];
    const totals = await getTotal();
    centerList.value[0].nums = totals.data[0].total;
    centerList.value[1].nums = totals.data[1].total;
    centerList.value[3].nums = totals.data[3].total;
    centerList.value[4].nums = totals.data[2].total;
};
getList();

// 反显职位权限名称
const positionName = (data: any) => {
    let name: any = []
    data.forEach((item: any) => {
        name.push(item.postName)
    })
    return name.join('/')
}

/** 待办工作跳转 */
const toProductList = (id: string) => {
    if (id == '4' || id == '1') {
        router.push({ path: "/productHome/productLists", query: { shelvesStatus: id, shelvesStatusName: id == '4' ? '待下架' : '已入库' } });
    } else if (id == '2') {
        router.push({ path: "/productHome/examineApprove", query: { status: '0', statusName: '待审批' } });
    } else if (id == '3') {
        router.push({ path: "/outboundRecord", query: { overdue: 1 } });
    }
};

/** 获取版本更新公告 */
const getNotice = async () => {
    const res = await listNotice({})
    const privacyNotice = res.rows.find(item => item.noticeTitle === '版本更新公告');
    if (privacyNotice) {
        versionNotice.value = stripTags(privacyNotice.noticeContent);
    }
}
getNotice()

// 通知中心
const icon_xiaoxiClick = () => {
    router.push({
        path: `/notice`,
        query: {
            type: '产品部'
        }
    });
}

const getCountNotReadMsg = async () => {
    const { data } = await queryDeptCount({})
    newsQuantity.value = Number(data?.readCount) + Number(data?.waitCount)
}
getCountNotReadMsg()

//================================日历==============
const showCalendar = ref(false);
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
const onConfirmCalendar = (values) => {
    const [start, end] = values;
    showCalendar.value = false;
    currentDateFormat.value = formatDate(start)
    currentDateFormatInterval.value = formatDate(end)
    gettotalByUserIdAndTime();
};
</script>

<style lang="less" scoped>
.home-index-shortcuts-card-right-top-text {
    position: absolute !important;
    left: 16px;
    top: 14px;
}

.home-index-shortcuts-card-right-bottom-text {
    position: absolute !important;
    left: 16px;
    top: 14px;
}

.home-index-data {
    .home-index-data-title-title-textimg {
        background: url("@/assets/newui/home/icon_shujujianbao@2x.png") no-repeat;
        background-size: 100% 100%;
        width: 62px;
        height: 19px;
        margin-left: 4px
    }

    .home-index-data-mainbox {
        position: relative;
    }

    border-radius: 5px;
    margin: 0 10px;
    margin-top: 20px;
    background: #fff;
    padding: 10px 10px 15px 10px;
    position: relative;

    .home-index-data-bg {
        background: url("@/assets/newui/home/icon_jianbaobeijing@2x.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 108px;
        height: 53px;
        right: 0;
        top: 0;
    }

    .home-index-data-card-position {
        width: 105px;
        height: 68px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding-left: 3px;
        position: relative;

        .home-index-data-card-position-text-size {
            position: absolute;
            right: 0;
        }

        &-text {
            margin-left: 3px;
            width: 0px;
            flex: 1;

            div:nth-child(1) {
                font-size: 18px;
                font-weight: 700;
                text-align: center;
            }

            div:nth-child(2) {
                text-align: center;
                font-size: 15px;
            }
        }
    }
}

.home-dates-box {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #0094FF;
    line-height: 12px;
    text-align: left;
    font-style: normal;
    width: 222px;
    height: 26px;
    background: #EEF0FF;
    border-radius: 5px;
    border: 1px solid #FFFFFF;
    filter: blur(0px);
    justify-content: space-between;
    padding-left: 10px;

    .line {
        width: 20px;
        height: 1px;
        background: #0094FF;
        margin-right: 5px;
    }

    .r_img {
        background: url("@/assets/newui/home/icon_rili@2x.png") no-repeat;
        background-size: 100% 100%;
        width: 24px;
        height: 24px;
    }
}

.home-index {
    .home-index-user-info {
        margin-left: 10px;
        margin-top: 7px;
        width: 0;
        flex: 1;

        .home-index-user-info-name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            line-height: 16px;
            color: #1A1B1C;
            text-align: left;
            font-style: normal;
            max-width: 200px;
        }

        .home-index-user-info-dandp {
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;


            .topbumen_l {
                height: 22px;
                width: 108px;
                line-height: 22px;
                color: #1881FF;
                position: relative;
                background: url("@/assets/newui/home/icon_bumen@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;

            }

            .topbumen_r {
                font-family: FontName;
                height: 22px;
                width: 92px;
                line-height: 22px;
                color: #FFFFFF;
                position: relative;
                background: url("@/assets/newui/home/icon_mingcheng@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-left: -6px;

            }
        }
    }

    width: 100%;
    background: url("@/assets/newui/home/icon_shouyebeijing@2x.png");
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 60px;
    color: #1a1b1c;
    overflow-y: scroll;
    position: relative;

    &-user {
        height: 60px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        position: relative;

        &-info {
            margin-left: 20px;
            margin-top: 10px;

            &-name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
            }

            &-dandp {
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }

    &-notice {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100 - 30px);
        box-sizing: border-box;
        height: 35px;
        background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);
        border-radius: 5px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        padding: 0 15px;

        .notice_icon {
            width: 14px;
            height: 14px;
        }

        .font {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-left: 10px;
            width: calc(100% - 30px);
            height: 35px;
        }

        :deep(.van-notice-bar) {
            background: none;
            padding: 0;
        }
    }

    &-data {
        // height: 194px;
        // // background: url("@/assets/home/icon_shujubeijing.png") no-repeat;
        // background-size: 100% 100%;
        // padding: 15px 15px 0;
        // margin: 15px;
        // border-radius: 5px;

        border-radius: 5px;
        margin: 0 10px;
        margin-top: 20px;
        background: #fff;
        padding: 10px 10px 15px 10px;
        position: relative;

        &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-title {
                display: flex;
                width: 100px;

                &-text {
                    margin-left: 5px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                }
            }

            &-time {
                width: 140px;
                height: 24px;
                line-height: 24px;
                background: #d4edff;
                border-radius: 12px;
                display: flex;

                &-text {
                    margin: 2px 0;
                    width: 34px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-style: normal;
                }

                &-active {
                    background: #0094ff;
                    border-radius: 12px;
                    color: #ffffff;
                }
            }
        }

        &-card {
            margin-top: 15px;

            &-position {
                width: 95px;
                height: 64px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                padding-left: 3px;

                &-text {
                    // margin-left: 3px;
                    height: 36px;

                    div:nth-child(1) {
                        font-size: 16px;
                        font-weight: 600;
                        text-align: center;
                    }

                    div:nth-child(2) {
                        font-size: 12px;
                    }
                }
            }

            &-first {
                display: flex;
                justify-content: space-between;

                &-first {
                    background: linear-gradient(270deg, #e1e3fb 0%, #e2f2ff 100%);

                    &-text {
                        color: #0055ff;
                    }
                }

                &-second {
                    background: linear-gradient(270deg, #e1fbed 0%, #e2fff6 100%);

                    &-text {
                        color: #14ce67;
                    }
                }

                &-third {
                    background: linear-gradient(270deg, #fbe1f0 0%, #ffe2e2 100%);

                    &-text {
                        color: #fe4b4b;
                    }
                }
            }

            &-second {
                display: flex;
                justify-content: space-between;
                margin-top: 15px;

                &-first {
                    background: linear-gradient(270deg, #fbe9e1 0%, #fff5e2 100%);

                    &-text {
                        color: #ff5a1a;
                    }
                }

                &-second {
                    background: linear-gradient(269deg, #e1eefb 0%, #e2fffd 100%);

                    &-text {
                        color: #00beff;
                    }
                }

                &-third {
                    background: linear-gradient(270deg, #ebe1fb 0%, #f5e2ff 100%);

                    &-text {
                        color: #c12aff;
                    }
                }
            }
        }

        &-date {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #0094ff;
            width: calc(100% - 75px);
            justify-content: flex-end;

            &-first {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }

            &-middle {
                margin: 0 10px;
            }

            &-second {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }
        }
    }

    &-todo {
        height: 100px;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 15px 15px 0;
        margin: 15px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-list {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;

            &-first {
                text-align: center;
                position: relative;

                div:nth-child(2) {
                    margin-top: 8px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #1a1b1c;
                    line-height: 12px;
                }

                &-badge {
                    height: 15px;
                    min-width: 15px;
                    border-radius: 8px 8px 8px 0;
                    background-color: #fc2540;
                    position: absolute;
                    left: 22px;
                    top: -6px;

                    div {
                        color: #ffffff;
                        font-size: 11px;
                        text-align: center;
                        padding: 2px;
                    }
                }
            }
        }
    }

    &-shortcuts {
        height: 213px;
        padding: 15px 15px 0;
        margin: 15px;
        background-color: #ffffff;
        border-radius: 5px;
        margin-bottom: 60px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-card {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            &-left {
                height: 160px;
                width: 154px;
                background: url("@/assets/home/icon_tianjiashangpinbeijing.png") no-repeat;
                background-size: 100% 100%;
                position: relative;

                &-image {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    width: 54px;
                    height: 54px;
                }

                &-text {
                    position: absolute;
                    right: 20px;
                    top: 27px;
                    font-size: 14px;
                    color: #ffffff;
                }

                &-tips {
                    margin: 15px 15px 0;
                    width: 123px;
                    position: absolute;
                    top: 70px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #ffffff;
                    line-height: 16px;
                }
            }

            &-right {
                margin-left: 10px;

                &-top {
                    width: 152px;
                    height: 74px;

                    background: url("@/assets/home/icon_tianjiagongyingshangbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 12px;
                    justify-content: space-around;
                    align-items: center;

                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }

                &-bottom {
                    width: 152px;
                    height: 74px;
                    margin-top: 11px;

                    background: url("@/assets/home/icon_yaoyueyangpinbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 12px;
                    justify-content: space-around;
                    align-items: center;

                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }
            }

            &-lefts {

                &-top {
                    width: 152px;
                    height: 74px;

                    background: url("@/assets/productHome/icon_lvsebeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 12px;
                    justify-content: space-around;
                    align-items: center;

                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }

                &-bottom {
                    width: 152px;
                    height: 74px;
                    margin-top: 11px;

                    background: url("@/assets/productHome/icon_lansebeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 12px;
                    justify-content: space-around;
                    align-items: center;


                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }
            }
        }
    }

    .supplier_detail_content_divorder {
        border-bottom: 1px solid #fafaff;
    }

    .supplier_detail_content_div_first {
        margin-top: 63vh;
    }

    .supplier_detail_content_div {
        font-size: 13px;
        height: 35px;
        // height: 25%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        :deep(.van-icon) {
            margin-left: 0% !important;
        }

        .label {
            min-width: 55px;
        }

        .van-image {
            width: 32px;
            height: 32px;
        }

        .value {
            color: #b8beca;
            max-width: calc(100% - 85px);
            display: flex;
            justify-content: right;
            word-break: break-all;
        }
    }

    .home-index-user-image {
        width: 60px;
        height: 60px;
    }


    .menu_cion {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 15px;
    }

    // .erweima_news {
    //   width: 24px;
    //   height: 24px;
    //   position: absolute;
    //   right: 69px;
    // }
    .menu_news {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 20px;
    }

    .erweima_cion {
        width: 14px;
        height: 14px;
        margin-top: 10px;
        position: absolute;
        right: 50px;
    }

    .QRcode {
        width: 315px;
        height: 350px;
        background-color: white;
        border-radius: 5px;

        .code_title {
            text-align: center;
            font-size: 16px;
            font-weight: Medium;
            padding-top: 28px;

            .guanbi_cion {
                position: absolute;
                top: 18px;
                right: 18px;
            }
        }

        .code {
            width: 201px;
            height: 201px;
            margin: 15px 57px;

            .code_content {
                width: 100%;
                height: 100%;
            }
        }

        .weixin_cion {
            margin-left: 141px;
        }
    }

    .savePicture {
        text-align: center;
        padding: 20px;
    }

    .right_popup {
        box-sizing: border-box;
        padding: 50px 15px;
        color: #1C1D1E;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        align-content: space-between;

        .right_popup_box {
            width: 100%;

            .right_popup_box_item {
                width: 100%;
                padding: 10px 0;
                border-bottom: 1px solid #efefef;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .right_popup_box_item_left {
                    display: flex;
                    align-items: center;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 20px;
                    }
                }
            }
        }

        .login-index-policy-text-rules {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
            margin-top: 65vh;
        }

        .login-index-policy-text-rule {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
        }

        .quit_button {
            width: 100%;
            height: 44px;
            background: #FDE7E7;
            border-radius: 5px;
            text-align: center;
            color: #FC2540;
            line-height: 44px;

            .quit_cion {
                width: 14px;
                height: 14px;
            }
        }
    }

    .home-index-data-card-first-first-text {
        white-space: nowrap;
    }

    .home-index-todo-title-image {
        width: 20px;
        height: 20px;
    }

    .home-index-todo-title-textimage {
        width: 59px;
        height: 16px;
    }

    .home-index-data-card-first-first-image {
        width: 40px;
        height: 40px;
        padding-top: 7px;
    }


    .home-index-todo-list-first-image {
        width: 30px;
        height: 30px;
    }

    .shortcuts_left {
        margin-left: 5px;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
}

.home-index-todo {
    height: 98px;
    background: url("@/assets/newui/home/icon_daibaner@2x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
    padding: 15px 15px 0;
    margin: 20px 10px;
    margin-bottom: 10px;
    position: relative;

    .todo_guajian {
        background: url("@/assets/newui/home/icon_daibangongzuotu@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 74px;
        height: 53px;
        top: -12px;
        right: 26px;
        position: absolute;
    }

    .home-index-todo-title {
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("@/assets/newui/home/icon_daibanyi@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 99px;
        height: 28px;
        position: absolute;
        top: 0px;

        .home-index-todo-title-imgtext {
            background: url("@/assets/newui/home/icon_daibangongzuo@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 59px;
            height: 16px;
        }
    }

    .home-index-todo-list {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        &-first {
            text-align: center;
            position: relative;
            width: 0px;
            flex: 1;

            div:nth-child(2) {
                margin-top: 3px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #1a1b1c;
                line-height: 12px;
            }

            &-badge {
                height: 17px;
                min-width: 17px;
                border-radius: 8px 8px 8px 0;
                background-color: #fc2540;
                position: absolute;
                right: 0px;
                top: -7px;

                div {
                    color: #ffffff;
                    font-size: 11px;
                    text-align: center;
                    padding: 2px;
                    line-height: 14px;
                }
            }
        }
    }
}

.home-index-shortcuts {
    margin: 0 10px;
    margin-top: 10px;
    background-color: #FAFEFF;
    border-radius: 5px;
    margin-bottom: 60px;
    height: auto;
    padding: 0;

    .home-index-shortcuts-title {
        display: flex;
        align-items: center;
        background: url("@/assets/newui/home/icon_kuaijierukoubeijing@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 40px;
        padding-left: 10px;

        div:nth-child(2) {
            margin-left: 5px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 14px;
            color: #1a1b1c;
            line-height: 14px;
        }
    }

    &-card {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-radius: 5px;

        &-left {
            width: 160px;
            height: 210px;
            padding: 15px;
            position: relative;
            background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 50%, #FFFFFF 100%);
            border-radius: 5px;

            &-image {
                position: absolute;
                right: 15px;
                bottom: 0px;
                width: 95px;
                height: 88px;
            }

            &-text {

                height: 16px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                color: #1A1B1C;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                width: fit-content;
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    width: 6px;
                    height: 10px;
                    background: url("@/assets/newui/home/icon_youjiantou@2x.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    right: -10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            &-tips {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #464E5D;
                line-height: 16px;
                text-align: justify;
                font-style: normal;
                margin-top: 10px;
            }
        }

        &-right {

            &-top {
                width: 162px;
                height: 100px;
                padding: 15px;
                box-sizing: border-box;
                position: relative;
                background: linear-gradient(180deg, #FEF1E1 0%, #FFFFFF 40%, #FFFFFF 100%);
                border-radius: 5px;

                &-image {
                    position: absolute;
                    right: 10px;
                    bottom: 0px;
                    width: 67px;
                    height: 59px;
                }

                &-text {
                    height: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 16px;
                    color: #1A1B1C;
                    line-height: 16px;
                    text-align: left;
                    font-style: normal;
                    width: fit-content;
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        width: 6px;
                        height: 10px;
                        background: url("@/assets/newui/home/icon_youjiantou@2x.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        right: -10px;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                &-tips {
                    position: absolute;
                    top: 35px;
                    width: 40%;
                    left: 15px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #464E5D;
                    line-height: 16px;
                    text-align: justify;
                    text-align-last: justify;
                    font-style: normal;
                    margin-top: 10px;
                }
            }

            &-bottom {
                width: 162px;
                height: 100px;
                padding: 15px;
                box-sizing: border-box;
                position: relative;
                background: linear-gradient(180deg, #FFE7EC 0%, #FFFFFF 40%, #FFFFFF 100%);
                border-radius: 5px;
                margin-top: 10px;

                &-image {
                    position: absolute;
                    right: 10px;
                    bottom: 0px;
                    width: 67px;
                    height: 59px;
                }

                &-text {
                    height: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 16px;
                    color: #1A1B1C;
                    line-height: 16px;
                    text-align: left;
                    font-style: normal;
                    width: fit-content;
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        width: 6px;
                        height: 10px;
                        background: url("@/assets/newui/home/icon_youjiantou@2x.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        right: -10px;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                &-tips {
                    position: absolute;
                    top: 35px;
                    width: 40%;
                    left: 15px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #464E5D;
                    line-height: 16px;
                    text-align: justify;
                    text-align-last: justify;
                    font-style: normal;
                    margin-top: 10px;
                }
            }
        }
    }
}

.home-index-shortcuts-card-right-bottom-tips2 {
    top: 51px;
    text-align-last: left;
    letter-spacing: 1px;
}
.t_r_10{
    transform: translateX(-4px);
}
</style>